import Slider from '@react-native-community/slider';
import { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';

interface SliderWithValueProps {
  label: string;
  value: number;
  minimumValue: number;
  maximumValue: number;
  onValueChange: (value: number) => void;
  onSlidingComplete?: () => void;
  suffix?: string; // 后缀，如 "%", "°" 等
  step?: number;
  labelMinWidth?: number; // 标签最小宽度
}

export default function SliderWithValue({
  label,
  value,
  minimumValue,
  maximumValue,
  onValueChange,
  onSlidingComplete,
  suffix = '',
  step = 1,
  labelMinWidth,
}: SliderWithValueProps) {
  const [showValue, setShowValue] = useState(false);
  const [sliderPosition, setSliderPosition] = useState(0);

  // 计算滑块位置
  const calculateSliderPosition = (val: number, min: number, max: number) => {
    const percentage = (val - min) / (max - min);
    return percentage;
  };

  const handleValueChange = (newValue: number) => {
    const position = calculateSliderPosition(newValue, minimumValue, maximumValue);
    setSliderPosition(position);
    onValueChange(newValue);
  };

  // 计算提示框的安全位置，防止超出屏幕
  const getSafePosition = () => {
    const tooltipWidth = 30; // 提示框的大小
    const containerPadding = 15; // 容器的内边距
    
    // 计算实际位置（百分比）
    let leftPercent = sliderPosition * 100;
    
    // 如果太靠左，限制最小位置
    if (leftPercent < 10) {
      leftPercent = 10;
    }
    // 如果太靠右，限制最大位置
    else if (leftPercent > 90) {
      leftPercent = 90;
    }
    
    return leftPercent;
  };

  const handleSlidingStart = () => {
    setShowValue(true);
  };

  const handleSlidingComplete = () => {
    setShowValue(false);
    onSlidingComplete?.();
  };

  return (
    <View style={styles.controlRow}>
      <Text style={[styles.controlLabel, labelMinWidth ? { minWidth: labelMinWidth } : null]}>{label}</Text>
      <View style={styles.sliderContainer}>
                 {showValue && (
           <View style={[
             styles.sliderValueContainer,
             { left: `${getSafePosition()}%` }
           ]}>
             <Text style={styles.sliderValue}>
               {step < 1 ? (Math.round(value / step) * step).toFixed(2) : Math.round(value / step) * step}{suffix}
             </Text>
           </View>
         )}
        <Slider
          style={styles.slider}
          minimumValue={minimumValue}
          maximumValue={maximumValue}
          value={value}
          step={step}
          onValueChange={handleValueChange}
          onSlidingStart={handleSlidingStart}
          onSlidingComplete={handleSlidingComplete}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  controlRow: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 15,
    width: "100%",
  },
  controlLabel: {
    fontSize: 12,
    color: "#666",
    marginRight: 15,
  },
  sliderContainer: {
    flex: 1,
    position: "relative",
  },
  sliderValueContainer: {
    position: "absolute",
    top: -30,
    transform: [{ translateX: -15 }],
    backgroundColor: "#333",
    borderRadius: 4,
    paddingHorizontal: 8,
    paddingVertical: 4,
    zIndex: 9999,
    elevation: 10,
  },
  sliderValue: {
    color: "#fff",
    fontSize: 12,
    fontWeight: "500",
    textAlign: "center",
    minWidth: 30,
  },
  slider: {
    flex: 1,
  },
});
